
<template>
  <div class="nihss-score">
    <van-form @submit="onSubmit" ref="formRef">
      <div :key="index" v-for="(item, index) in list">
        <div class="radio-title-name"><span>{{index + 1}}</span>{{item.name}}</div>
        <van-field :name="`radio-${item.prefix}`">
          <template #input>
            <van-radio-group @click="radioClick(item)" v-model="item.vModel" @change="radioChange" direction="horizontal">
              <van-grid direction="horizontal" :column-num="1" :gutter="5" :border="false" :center="false">
                <van-grid-item :key="option.name" v-for="option in item.options">
                  <van-radio :name="option.score" shape="square">{{option.score}} {{option.name}}</van-radio>
                </van-grid-item>
              </van-grid>
            </van-radio-group>
          </template>
        </van-field>
      </div>
    </van-form>
    <!-- 凝视 -->
    <van-popup class="popup" v-model:show="visibleGaze" round closeable :style="{ width: '80%', height: '20%' }">
      <div class="popup-title">请选择向左凝视或向右凝视</div>
      <van-radio-group v-model="checkedGaze">
        <van-radio name="2" shape="square">向左凝视</van-radio>
        <van-radio name="1" shape="square">向右凝视</van-radio>
      </van-radio-group>
    </van-popup>
    <!-- 凝视 -->
    <!-- 面瘫 -->
    <van-popup class="popup" v-model:show="visibleFace" round closeable :style="{ width: '80%', height: '20%' }">
      <div class="popup-title">请选择左侧面瘫或右侧面瘫</div>
      <van-radio-group v-model="checkedFace">
        <van-radio name="1" shape="square">左侧面瘫</van-radio>
        <van-radio name="2" shape="square">右侧面瘫</van-radio>
      </van-radio-group>
    </van-popup>
    <!-- 面瘫 -->
    <!-- 感觉 -->
    <van-popup class="popup" v-model:show="visibleFeel" round closeable :style="{ width: '80%', height: '20%' }">
      <div class="popup-title">请选择左感觉障碍或右感觉障碍</div>
      <van-radio-group v-model="checkedFeel">
        <van-radio name="1" shape="square">左感觉障碍</van-radio>
        <van-radio name="2" shape="square">右感觉障碍</van-radio>
      </van-radio-group>
    </van-popup>
    <!-- 感觉 -->
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, defineEmits, defineExpose, nextTick } from 'vue'
  import { questionList } from './hooks/question-list'
  import type { FormInstance } from 'vant'
  import { useRouter } from 'vue-router'

  const formRef = ref<FormInstance>()
  const list = reactive(questionList)
  const router = useRouter()
  const emit = defineEmits(['getScore'])

  const visibleGaze = ref(false)
  const visibleFace = ref(false)
  const visibleFeel = ref(false)

  const checkedGaze = ref(null)
  const checkedFace = ref(null)
  const checkedFeel = ref(null)

  const radioChange = () => {
    const popupObj = {
      gaze: checkedGaze.value,
      face: checkedFace.value,
      feel: checkedFeel.value,
    }
    // console.log(formRef.value?.getValues())
    emit('getScore', formRef.value?.getValues(), popupObj)
  }

  const radioClick = (item: any) => {
    if (item.name === '凝视' && item.vModel > 0) {
      visibleGaze.value = true
    } else if (item.name === '面瘫' && item.vModel > 0) {
      visibleFace.value = true
    } else if (item.name === '感觉' && item.vModel > 0) {
      visibleFeel.value = true
    }
  }

  const onSubmit = (values: any) => {
    console.log(values)
    router.push('/nihss-graph')
  }
  const resetScore = () => {
    checkedGaze.value = null
    checkedFace.value = null
    checkedFeel.value = null
    list.map((item: any) => {
      item.vModel = null
    })
    nextTick(() => {
      radioChange()
    })
  }
  defineExpose({ resetScore })
</script>

<style lang="less" scoped>
  @primary-num: 6px;
  .nihss-score {
    width: 100%;
    height: auto;
    background: #f7f8fa;
    user-select: none;
  }
  .radio-title-name {
    background: #ffffff;
    font-size: 14px;
    padding-left: 12px;
    padding-top: 10px;
    border-top-left-radius: @primary-num;
    border-top-right-radius: @primary-num;
    font-weight: bolder;

    span {
      margin: 0 5px;
    }
  }

  .van-form {
    padding: 12px;
    box-sizing: border-box;
  }

  .van-cell {
    margin-bottom: 10px;
    border-bottom-left-radius: @primary-num;
    border-bottom-right-radius: @primary-num;
  }

  /deep/.van-popup {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /deep/.popup .van-radio-group {
    width: 240px;
    margin-top: 24px;

    .van-radio {
      float: left;
      width: 50%;
      padding-left: 12px;
      font-size: 14px;
    }
  }
  .popup-title {
    position: absolute;
    top: 18px;
    left: 30px;
    font-size: 14px;
    font-weight: bolder;
  }
</style>
